/**
 * imgnotes jQuery plugin
 * version 0.1
 *
 * Copyright (c) 2008 Dr. Tarique Sani <tarique@sanisoft.com>
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt) 
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * @URL      http://www.sanisoft.com/blog/2008/05/26/img-notes-jquery-plugin/
 * @Example  example.html
 *
 **/

//Wrap in a closure
(function($) {

	$.fn.imgNotes = function(n) {
	
		if(undefined != n){
			notes = n;
		} 
		var indx = 1;

		var imageId = $(this).attr('id');
		
		setNotes(notes, indx, imageId);
			
//		$(window).resize(function () {
//			$('.note').remove();
//			$('.notep').remove();
//			imgOffset = $(image).offset();
//			indx = 1;
//			setNotes(notes, indx, imageId);
//		});
	} 
	
	function addnoteevents(imageId, indx) {

		var note_close = "#note_"+imageId+"_"+(indx-1)+" .close";

		$(note_close).click(function(){
			var d_indx = $(this).attr('close:indx');
			var d_img = $(this).attr('close:img');
			var image_seq = $('#'+d_img).attr('seq:no');
			markers[image_seq] = $.grep(markers[image_seq], function (value,i) { return i != d_indx; });
			$('#note_'+d_img+"_"+d_indx).remove();
			$('#notep_'+d_img+"_"+d_indx).remove();
			indx = 1;
			setNotes(markers[image_seq],indx, d_img);
		})
	}

	function setNotes(items,indx, imageId)
	{
		//first remove all noites and then reset it
		$(items).each(function(j){
			$('#note_'+imageId+"_"+j).remove();
			$('#notep_'+imageId+"_"+j).remove();
		});
		
		$(items).each(function(){
			appendnote(this,indx, imageId);
			addnoteevents(imageId, indx);
			indx++;
		});
	}

	function appendnote(note_data, indx, imgid){

		var imgOffset = $('#'+imgid).offset();
		var note_left  = parseInt(imgOffset.left) + parseInt(note_data.x);
		var note_top   = parseInt(imgOffset.top) + parseInt(note_data.y);
		var note_p_top = note_top + parseInt(note_data.height)+5;
		
		var note_area_div = $("<div class='note' id = 'note_"+imgid+"_"+(indx-1)+"' ><div close:img='"+imgid+"' close:indx='"+(indx-1)+"' class='close'></div>").css({ left: note_left + 'px', top: note_top + 'px', width: note_data.width + 'px', height: note_data.height + 'px' });
		
		var note_text_div = $('<div class="notep" id = "notep_'+imgid+'_'+(indx-1)+'" ><span class="noten">'+(indx)+":</span>"+note_data.note+'</div>').css({ width: note_data.width + 'px', left: note_left + 'px', top: note_p_top + 'px'});
	
		$('body').append(note_area_div);
		$('body').append(note_text_div);

	}
// End the closure
})(jQuery);

function showaddnote (img, area)
{
	if(area.height > 10 && area.width > 10)
	{
		imgOffset = $(img).offset();
		form_left  = parseInt(imgOffset.left) + parseInt(area.x1);
		form_top   = parseInt(imgOffset.top) + parseInt(area.y1) + parseInt(area.height)+5;

		$('#noteform').css({ left: form_left + 'px', top: form_top + 'px'});
		$('#noteform').show();
		$('#noteform').css("z-index", 1000);
		$('#x').val(area.x1);
		$('#y').val(area.y1);
		$('#h').val(area.height);
		$('#w').val(area.width);
		$('#setNote').attr('obj:id',$(img).attr('id'));
		$('#cancelnote').attr('obj:id',$(img).attr('id'));
	}
}

function hideaddnote (img, area)
{
	$('#noteform').hide();
	$('#x').val('');
	$('#y').val('');
	$('#h').val('');
	$('#w').val('');
	$('#setNote').attr('obj:id','');
	$('#cancelnote').attr('obj:id','');
}

function resetSelection(obj)
{
	var newobj = $('#'+obj).imgAreaSelect({hide: true, instance: true, onSelectChange: hideaddnote, onSelectEnd: showaddnote});
	newobj.setSelection(1,1,1,1,true);
	newobj.setOptions({ show: true});
	$('#noteform').hide();
}

function parseNotes(notes, imageid, src)
{ var res = '';
  var image = '';
	$(notes).each(function(i){

		if(image == imageid)
		{
			res += ',{"x":"'+this.x+'","y":"'+this.y+'","height":"'+this.height+'","width":"'+this.width+'","note":"'+this.note+'"}';
		}
		else
		{
			res += '"src":"'+src+'","imageid":"'+imageid+'","notes":['
			res += '{"x":"'+this.x+'","y":"'+this.y+'","height":"'+this.height+'","width":"'+this.width+'","note":"'+this.note+'"}';
			image = imageid;
		}
	});
	res += "]";

	return res;
}

//initiate plugin for each images

$(document).ready(function(){
		$('#cancelnote').click(function(){
			var imgId = $(this).attr('obj:id');
			resetSelection(imgId);
		});

		$('#setNote').click(function(){
			var x = $('#x').val();
			var y = $('#y').val();
			var h = $('#h').val();
			var w = $('#w').val();
			var note = $('#note').val();
			var imgId = $(this).attr('obj:id');
			var src = $('#'+imgId).attr('src');
			var simg = $('#'+imgId).attr('seq:no');
			markers[parseInt(simg)][markers[simg].length] = {"x":x,"y":y,"height":h,"width":w,"note":note,'imageid':imgId, 'src':src};
			$('#'+imgId).imgNotes(markers[simg]);
			resetSelection(imgId);
		});
});
